<template>
  <div className="main-content">
    <div style="width: 70%; margin: 20px auto">
      <div style="color: #333333; font-size: 20px; font-weight: 700">{{ departmentData.name }}：课程介绍，欢迎你的加入！
        <el-button type="primary" @click="init" :disabled="ApplyStatus">申请学习</el-button>
      </div>
      <div style="margin: 10px 0">
        <img :src="departmentData.img" alt="" style="width: 250px;height: 250px">
      </div>
      <div style="margin-top: 10px; color: #767474">课程内容：{{ departmentData.describes }}</div>
      <div style="margin-top: 10px; color: #767474">课程类型：{{ departmentData.type }}</div>

      <div style="margin-top: 50px; font-size: 18px">欢迎发表您宝贵的意见</div>
      <div style="margin-top: 20px">
        <el-input type="textarea" :rows="5" v-model="content"></el-input>
      </div>
      <div style="margin-top: 10px; text-align: right">
        <el-button type="primary" @click="submit(content, 0)">提交</el-button>
      </div>
      <div style="margin-top: 30px; margin-bottom: 500px">
        <el-row v-for="item in commentData" style="margin-bottom: 30px">
          <el-col :span="4">
            <div style="display: flex; align-items: center;">
              <img :src="item.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
              <div style="flex: 1; margin-left: 10px">{{ item.user }}</div>
            </div>
          </el-col>
          <el-col :span="20">
            <div style="height: 50px; line-height: 50px">
              <el-row>
                <el-col :span="18" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  {{ item.content }}
                </el-col>
                <el-col :span="6" style="text-align: right">
                  <span style="font-size: 12px"> {{ item.time }}</span>
                </el-col>
              </el-row>
            </div>
            <div v-for="child in item.children" style="margin-bottom: 5px">
              <el-row>
                <el-col :span="5">
                  <div style="display: flex; align-items: center;">
                    <img :src="child.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                    <div style="margin-left: 5px">{{ child.user }} 回复：</div>
                  </div>
                </el-col>
                <el-col :span="13"
                        style="height: 50px; line-height: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                  {{ child.content }}
                </el-col>
                <el-col :span="6" style="height: 50px; line-height: 50px; text-align: right">
                  <span style="font-size: 12px"> {{ child.time }}</span>
                </el-col>
              </el-row>
            </div>
            <div style="margin-top: 20px">
              <el-input style="width: 400px" v-model="item.tmp"></el-input>
              <el-button type="primary" style="margin-left: 5px" @click="submit(item.tmp, item.id)">回复</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog title="填写信息" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
      <el-form label-width="100px" style="padding-right: 50px">
        <el-form-item prop="description" label="申请说明">
          <el-input v-model="description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {

  data() {
    let departmentId = this.$route.query.id
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      fromVisible: false,
      description: null,
      departmentData: {},
      departmentId: departmentId,
      content: null,
      commentData: [],
      list: [],
      ApplyStatus: false,
      ApplyList: []
    }
  },
  mounted() {
    this.loadDepartment()
    this.loadComment()
    this.loadApply()
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    loadApply() {
      this.request.get('/apply').then(res => {
        if (res.code == 200) {
          this.ApplyList = res.data

          this.ApplyList.forEach(item => {
            if (item.courseId == this.departmentId && item.status == '审核通过') {
              this.ApplyStatus = true
            }
          })
        }
      })
    },
    init() {
      this.loadApply()
      this.fromVisible = true
    },
    save() {
      let bool = this.ApplyList.some(item => (item.courseId == this.departmentId && item.status == '待审核'))
      if (bool) {
        this.$message.warning("您已提交过申请，请等待审批")
      } else {
        let data = {
          userId: this.user.id,
          courseId: this.departmentId,
          description: this.description
        }
        this.request.post('/apply', data).then(res => {
          if (res.code === '200') {
            this.$message.success('申请成功，等待教师审核，您可以在申请的课程查看审核进度')
            this.fromVisible = false
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    loadDepartment() {
      this.request.get('/course/' + this.departmentId).then(res => {
        if (res.code === '200') {
          this.departmentData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    submit(content, parentId) {
      let data = {
        userId: this.user.id,
        courseId: this.departmentId,
        content: content,
        parentId: parentId,
      }
      this.request.post('/comment', data).then(res => {
        if (res.code === '200') {
          this.$message.success('评论成功')
          this.content = null
          this.loadComment()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    compareArrays(arr1, arr2) {
      let result = [];
      arr1.forEach(obj1 => {
        result.push(obj1);
        arr2.forEach(obj2 => {
          if (obj1.id === obj2.parentId) {
            obj1.children.push(obj2);
          }
        });
      });
      return result
    },
    loadComment() {
      // this.request.get('/comment').then(res => {
      this.request.get('/comment/selectAll?courseId=' + this.departmentId).then(res => {
        if (res.code === '200') {
          console.log(res.data,'data')
          let list = res.data
          // let list = list?.filter(item => item.courseId == this.departmentId)
          // let one = []
          // let tow = []
          // if (list?.length > 0) {
          //   list.forEach(v => {
          //     if (v.parentId == 0) {
          //       v.children = []
          //       one.push(v)
          //     } else {
          //       tow.push(v)
          //     }
          //   })
          // }
          // let tableList = this.compareArrays(one, tow)
          // this.commentData = tableList
          this.commentData = list
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>